<template>
  <div class="container">
    <live-player
      id="player"
      class="myplayer"
      src="rtmp://58.200.131.2:1935/livetv/hunantv"
      mode="live"
      autoplay
      @statechange="statechange"
      style="width: 100%; height: 100%;"
      @error="error"
    >
       <cover-view class="control">
         <cover-view class="left">
          <img src="../../../../static/assets/icon/new-home-icon1.png" alt="">
          <cover-view class="name">
            <p class="overflow">喜欢吃面的...</p>
            <p>美妆</p>
          </cover-view>
        </cover-view>
        <cover-view class="danmu">
           <cover-view v-for="(item,index) in commentList" :key="index"  class="comment">
            {{item.name}}:{{item.comment}}
          </cover-view>
        </cover-view>
        <cover-view class="rignt">
          <div class="pro-card">
            <img src="http://img3.imgtn.bdimg.com/it/u=4092387650,1688197925&fm=11&gp=0.jpg" alt="">
            <div class="pro-info">
              <p class="name">好用的眉笔</p>
              <p class="price">￥38.8</p>
            </div>
          </div>
          <p class="product" @click="viewProduct"><img src="../../../../static/assets/icon/i22.png" alt=""></p>
        </cover-view>
      </cover-view> 
    </live-player>
  </div>
</template>

<script>
export default {
  data () {
    return {
      commentList: [
        {
          id: 1,
          name: '有趣的人',
          comment: '喜欢'
        },
        {
          id: 2,
          name: '有趣的人',
          comment: '喜欢这个眉笔好看,OMG，买它，买它，买它'
        },
        {
          id: 3,
          name: '有趣的人',
          comment: '喜欢这个眉笔好看'
        }
      ]
    }
  },
  methods: {
    statechange (e) {
      console.log('live-pusher code:', e.target.code)
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.control{
  width: 100%;
  height: 100%;
  position: relative;
  .rignt{
    position: absolute;
    bottom: 25px;
    right: 15px;
    .product{
      width: 30px;
      height: 30px;
      background:rgba($color: #000000, $alpha: 0.5);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      img{
        width: 21px;
        height: 21px;
      }
    }
    .pro-card{
      background: #ffffff;
      display: flex;
      padding: 6px;
      border-radius: 5px;
      img{
        width: 40px;
        height: 40px;
        margin-right: 6px;
      }
      .pro-info{
        .name{
          font-size: 8px;
          margin-bottom: 10px;
        }
        .price{
          font-size: 11px;
          color: #ff3131;
        }
      }
    }
  }
  .left{
    padding: 15px;
    width: 110px;
    height: 35px;
    background:rgba($color: #000000, $alpha: 0.5);
    border-radius: 23px;
    color: #ffffff;
    display: flex;
    font-size: 11px;
    padding: 3px;
    .overflow{
      width: 80px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    img{
      width: 25px;
      height: 25px;
      margin-right: 2px;
    }
  }
  .danmu{
    position: absolute;
    bottom: 25px;
    left: 15px;
    .comment{
      background:rgba($color: #000000, $alpha: 0.5);
      color: #ffffff;
      font-size: 13px;
      border-radius: 10px;
      margin-top:10px;
      padding: 5px;
      max-width: 200px;
      word-break: break-all; 
	    word-wrap: break-word;
      white-space: normal;
    }
  }
}

</style>